<template>
    <view class="container m-b5" v-if="total.all > 0">
        <!-- 顶部选项卡 -->
        <view class="swiper-tab dis-flex box-align-center flex-y-center">
            <view :class="'swiper-tab-item ' + (options.scoreType == -1 ? 'on' : '')" data-current="-1" @tap="swichNav">全部 ({{ total.all }})</view>
            <view :class="'swiper-tab-item ' + (options.scoreType == 10 ? 'on' : '')" data-current="10" @tap="swichNav">好评 ({{ total.praise }})</view>
            <view :class="'swiper-tab-item ' + (options.scoreType == 20 ? 'on' : '')" data-current="20" @tap="swichNav">中评 ({{ total.review }})</view>
            <view :class="'swiper-tab-item ' + (options.scoreType == 30 ? 'on' : '')" data-current="30" @tap="swichNav">差评 ({{ total.negative }})</view>
        </view>

        <!-- 评价列表 -->
        <scroll-view :scroll-y="true" @scrolltolower="bindDownLoad" :style="'height: ' + swiperHeight + 'px;'">
            <view class="comment-list" v-if="list.data.length">
                <view class="comment-item" v-for="(item, index) in list.data" :key="index">
                    <view class="goods-comment-box dis-flex flex-dir-column b-f b-b">
                        <view class="row dis-flex flex-y-center">
                            <!-- 用户信息 -->
                            <view class="user dis-flex flex-y-center">
                                <image class="user_avatar" mode="aspectFill" :src="item.user.avatarUrl"></image>
                                <text class="user_name f-26">{{ item.user.nickName }}</text>
                            </view>
                            <!-- 评价评星 -->
                            <view class="com_xing dis-flex flex-y-center">
                                <text class="iconfont icon-shoucang active"></text>
                                <block v-if="item.score < 30">
                                    <text class="iconfont icon-shoucang active"></text>
                                    <text class="iconfont icon-shoucang active"></text>
                                </block>
                                <block v-if="item.score < 20">
                                    <text class="iconfont icon-shoucang active"></text>
                                    <text class="iconfont icon-shoucang active"></text>
                                </block>
                            </view>
                            <!-- 评价日期 -->
                            <view class="flex-box f-22 col-9 t-r">{{ item.create_time }}</view>
                        </view>
                        <!-- 评价内容 -->
                        <view class="goods-comment-cont row m-top20">
                            <text class="f-26">{{ item.content }}</text>
                        </view>
                        <!-- 评价图片 -->
                        <view class="comment-images row" v-if="item.image.length">
                            <view class="image-preview" v-for="(image, imgIndex) in item.image" :key="imgIndex">
                                <image :data-comment-index="index" :data-img-index="imgIndex" @tap.stop.prevent="previewImages" mode="aspectFill" :src="image.file_path"></image>
                            </view>
                        </view>
                        <!-- 商品规格 -->
                        <view class="row f-24 col-9">{{ item.order_goods.goods_attr }}</view>
                    </view>
                </view>
            </view>
            <view class="yoshop-notcont" v-else-if="notcont">
                <text class="iconfont icon-wushuju"></text>
                <text class="cont">亲，暂时没有记录哦</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 当前tab
            // currentTab: -1,

            // 列表高度
            swiperHeight: 0,

            // 页面参数
            options: {
                item_id: null,
                scoreType: -1
            },

            // 评论列表
            list: [],

            // 当前页码
            page: 1,

            // show
            notcont: false,

            total: {
                all: 0,
                praise: '',
                review: '',
                negative: ''
            },

            no_more: false,
            imgIndex: 0,

            image: {
                file_path: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this;

        // 设置swiper的高度
        this.setSwiperHeight();

        // 记录页面参数
        that.setData(
            {
                'options.item_id': options.item_id
            },
            function () {
                // 获取评论列表
                that.getCommentList();
            }
        );
    },
    methods: {
        /**
         * 设置swiper的高度
         */
        setSwiperHeight: function () {
            // 获取系统信息(拿到屏幕宽度)
            let systemInfo = uni.getSystemInfoSync();
            let rpx = systemInfo.windowWidth / 750;
            let // 计算rpx
                tapHeight = Math.floor(rpx * 80) + 1;
            let // tap高度
                swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
            this.setData({
                swiperHeight
            });
        },

        /**
         * 获取评论列表
         */
        getCommentList: function (isNextPage, page) {
            let that = this;
            let params = that.options;
            params.page = page || 1;
            app.globalData._get('comment/lists', params, function (result) {
                let resultList = result.data.list;
                let dataList = that.list;
                if (isNextPage !== true || typeof dataList.data === 'undefined') {
                    that.setData({
                        list: resultList,
                        total: result.data.total,
                        notcont: !resultList.length
                    });
                } else {
                    that.setData({
                        'list.data': dataList.data.concat(resultList.data),
                        total: result.data.total
                    });
                }
            });
        },

        /**
         * 点击tab切换
         */
        swichNav: function (e) {
            let that = this;
            that.setData(
                {
                    list: {},
                    page: 1,
                    no_more: false,
                    'options.scoreType': e.target.dataset.current
                },
                function () {
                    // 获取评论列表
                    that.getCommentList();
                }
            );
        },

        /**
         * 图片预览
         */
        previewImages: function (e) {
            let commentIndex = e.target.dataset.commentIndex;
            let imgIndex = e.target.dataset.imgIndex;
            let images = this.list.data[commentIndex].image;
            let imageUrls = [];
            images.forEach(function (item) {
                imageUrls.push(item.file_path);
            });
            uni.previewImage({
                current: imageUrls[imgIndex],
                urls: imageUrls
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad: function () {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            }
            this.getCommentList(true, ++this.page);
        }
    }
};
</script>
<style>
@import './comment.css';
</style>
